<template>
  <div>
       <van-nav-bar class="head" title="积分详细" left-text="" left-arrow />
    <van-row class="first">
      <van-col span="8"></van-col>
      <van-col span="8">当前积分：7856</van-col>
      <van-col span="8"></van-col>
    </van-row>
    <van-row type="flex" justify="center" class="second">
      <van-col span="6"></van-col>
      <van-col span="4" class="second1">积分规则</van-col>
      <van-col span="6"></van-col>
    </van-row>

    <van-cell-group class="third" v-for="(item, index) in list" :key="index">
      <van-cell :title="item.title" :value="item.value"></van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "完善基础资料",
          value: "+50",
        },
        {
          title: "发表活动",
          value: "+100",
        },
        {
          title: "发表评论",
          value: "+10",
        },
        {
          title: "每日签到",
          value: "+5",
        },
        {
          title: "发布发现动态",
          value: "+10",
        },
        {
          title: "删除发现动态",
          value: "-10",
        },
      ],
    };
  },
};
</script>

<style scoped lang='less'>
.head {
    width: 100%;
    height: 51px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(239, 239, 239, 1);
    position: fixed;
    top: 0;
  }
  /deep/.van-nav-bar .van-icon {
    color: rgba(153, 153, 153, 1);
  }
  /deep/.van-nav-bar__title {
    color: rgba(42, 131, 78, 1);
    font-size: 18px;
  }
.first {
  margin-top: 77px;
  font-size: 16px;
}
.second {
  margin-top: 13px;
  font-size: 12px;
  margin-bottom: 28px;
  .second1 {
    border-bottom: 1px solid rgba(80, 80, 80, 1);
    font-size: 12px;
    color: rgba(42, 131, 78, 1);
    text-align: center;
  }
}

.third {
  color: rgba(25, 25, 25, 1);
  font-size: 14px;
  .van-cell__title {
    text-align: left;
  }
}
</style>